<template>
  <div class="small-pets-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1>小型宠物</h1>
        <p>探索可爱的小型宠物世界，找到适合你的小伙伴</p>
      </div>
    </div>
    
    <!-- 小型宠物分类 -->
    <div class="pet-categories">
      <button 
        class="category-button"
        :class="{ active: selectedCategory === '' }"
        @click="selectedCategory = ''"
      >
        全部
      </button>
      <button 
        class="category-button"
        :class="{ active: selectedCategory === '兔子' }"
        @click="selectedCategory = '兔子'"
      >
        兔子
      </button>
      <button 
        class="category-button"
        :class="{ active: selectedCategory === '仓鼠' }"
        @click="selectedCategory = '仓鼠'"
      >
        仓鼠
      </button>
      <button 
        class="category-button"
        :class="{ active: selectedCategory === '豚鼠' }"
        @click="selectedCategory = '豚鼠'"
      >
        豚鼠
      </button>
      <button 
        class="category-button"
        :class="{ active: selectedCategory === '龙猫' }"
        @click="selectedCategory = '龙猫'"
      >
        龙猫
      </button>
    </div>
    
    <!-- 小型宠物展示 -->
    <div class="small-pets-grid">
      <router-link 
        :to="`/breed/${pet.id}`"
        class="pet-card"
        v-for="pet in filteredPets"
        :key="pet.id"
      >
        <div class="pet-image-wrapper">
          <img :src="pet.imageUrl" :alt="pet.name" class="pet-image" />
          <div class="pet-type-badge">{{ pet.type }}</div>
        </div>
        <div class="pet-info">
          <h3>{{ pet.name }}</h3>
          <div class="pet-details">
            <div class="detail-item">
              <span class="detail-label">寿命：</span>
              <span class="detail-value">{{ pet.lifespan }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">体型：</span>
              <span class="detail-value">{{ pet.size }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">难度：</span>
              <div class="difficulty-level">
                <div 
                  class="difficulty-dot"
                  v-for="i in 3"
                  :key="i"
                  :class="{ 'active': i <= pet.careDifficulty }"
                ></div>
              </div>
            </div>
          </div>
          <p class="pet-description">{{ pet.description }}</p>
          <div class="view-details">
            查看详情 →
          </div>
        </div>
      </router-link>
    </div>
    
    <!-- 饲养指南 -->
    <div class="care-guides">
      <h2>小型宠物饲养指南</h2>
      <div class="guides-container">
        <div class="guide-card">
          <div class="guide-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="guide-content">
            <h3>合适的居住环境</h3>
            <p>为小型宠物提供足够空间的笼子，确保通风良好，保持清洁</p>
          </div>
        </div>
        <div class="guide-card">
          <div class="guide-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.43 12.98C19.47 12.65 19.5 12.32 19.5 12C19.5 11.68 19.47 11.35 19.43 11.02L21.54 9.37C21.73 9.22 21.78 8.95 21.66 8.73L19.66 5.27C19.54 5.05 19.27 4.96 19.05 5.05L16.56 6.05C16.04 5.66 15.5 5.32 14.87 5.07L14.5 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.5 2.42L9.13 5.07C8.5 5.32 7.96 5.66 7.44 6.05L4.95 5.05C4.73 4.96 4.46 5.05 4.34 5.27L2.34 8.73C2.22 8.95 2.27 9.22 2.46 9.37L4.57 11.02C4.53 11.35 4.5 11.68 4.5 12C4.5 12.32 4.53 12.65 4.57 12.98L2.46 14.63C2.27 14.78 2.22 15.05 2.34 15.27L4.34 18.73C4.46 18.95 4.73 19.03 4.95 18.95L7.44 17.94C7.96 18.34 8.5 18.68 9.13 18.93L9.5 21.58C9.54 21.82 9.75 22 10 22H14C14.25 22 14.46 21.82 14.5 21.58L14.87 18.93C15.5 18.68 16.04 18.34 16.56 17.94L19.05 18.95C19.27 19.03 19.54 18.95 19.66 18.73L21.66 15.27C21.78 15.05 21.73 14.78 21.54 14.63L19.43 12.98Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="guide-content">
            <h3>均衡饮食</h3>
            <p>根据宠物种类提供专门的饲料，确保营养均衡，保持健康</p>
          </div>
        </div>
        <div class="guide-card">
          <div class="guide-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="guide-content">
            <h3>定期清洁</h3>
            <p>定期清理宠物笼舍，更换垫料，保持环境干净卫生</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 选中的分类
const selectedCategory = ref('')

// 小型宠物数据（模拟数据）
const smallPets = ref([
  {
    id: 1,
    name: '荷兰侏儒兔',
    type: '兔子',
    size: '小型',
    lifespan: '7-12年',
    careDifficulty: 2, // 1-3，1表示容易，3表示困难
    description: '荷兰侏儒兔是世界上最小的家兔品种之一，性格温顺，适合家庭饲养。它们需要足够的活动空间和新鲜的干草。',
    imageUrl: 'https://picsum.photos/id/239/600/400'
  },
  {
    id: 2,
    name: '垂耳兔',
    type: '兔子',
    size: '中型',
    lifespan: '7-10年',
    careDifficulty: 2,
    description: '垂耳兔以其下垂的耳朵而闻名，性格友好、安静。它们需要定期梳理毛发，保持清洁。',
    imageUrl: 'https://picsum.photos/id/1059/600/400'
  },
  {
    id: 3,
    name: '黄金仓鼠',
    type: '仓鼠',
    size: '超小型',
    lifespan: '2-3年',
    careDifficulty: 1,
    description: '黄金仓鼠是最常见的宠物仓鼠品种之一，性格独立，适合初次饲养者。它们喜欢夜间活动，需要跑轮来保持活力。',
    imageUrl: 'https://picsum.photos/id/1024/600/400'
  },
  {
    id: 4,
    name: '三线仓鼠',
    type: '仓鼠',
    size: '超小型',
    lifespan: '2-3年',
    careDifficulty: 1,
    description: '三线仓鼠是一种小型、活泼的仓鼠品种，毛色通常为灰色或棕色，有三条深色条纹。它们性格温和，适合作为宠物。',
    imageUrl: 'https://picsum.photos/id/1025/600/400'
  },
  {
    id: 5,
    name: '豚鼠',
    type: '豚鼠',
    size: '中型',
    lifespan: '5-8年',
    careDifficulty: 2,
    description: '豚鼠，也称为荷兰猪，是一种友好、社交性强的小型宠物。它们需要宽敞的笼子和同伴，喜欢吃新鲜的蔬菜和水果。',
    imageUrl: 'https://picsum.photos/id/1074/600/400'
  },
  {
    id: 6,
    name: '龙猫',
    type: '龙猫',
    size: '中型',
    lifespan: '10-15年',
    careDifficulty: 3,
    description: '龙猫，也称为毛丝鼠，拥有浓密柔软的毛发。它们需要凉爽、干燥的环境，对温度和湿度敏感，饲养难度较高。',
    imageUrl: 'https://picsum.photos/id/1069/600/400'
  },
  {
    id: 7,
    name: '狮子兔',
    type: '兔子',
    size: '中型',
    lifespan: '7-10年',
    careDifficulty: 2,
    description: '狮子兔是一种长毛兔品种，头部和颈部的毛发较长，看起来像狮子的鬃毛。它们性格温顺，需要定期梳理毛发。',
    imageUrl: 'https://picsum.photos/id/1084/600/400'
  },
  {
    id: 8,
    name: '布丁仓鼠',
    type: '仓鼠',
    size: '超小型',
    lifespan: '2-3年',
    careDifficulty: 1,
    description: '布丁仓鼠是一种颜色呈金黄色的仓鼠品种，性格活泼、好动。它们适合单独饲养，需要适当的玩具来打发时间。',
    imageUrl: 'https://picsum.photos/id/1025/600/400'
  }
])

// 过滤后的小型宠物
const filteredPets = computed(() => {
  if (!selectedCategory.value) {
    return smallPets.value
  }
  return smallPets.value.filter(pet => pet.type === selectedCategory.value)
})
</script>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #4CAF50;
  --primary-hover: #3d8b40;
  --text-primary: #333;
  --text-secondary: #666;
  --white: #ffffff;
  --light-gray: #f5f5f5;
  --border-color: #e0e0e0;
  --radius: 12px;
  --transition: all 0.3s ease;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 页面容器 */
.small-pets-container {
  min-height: 100vh;
  background-color: var(--light-gray);
  padding-bottom: 40px;
}

/* 页面头部 */
.page-header {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 30px;
}

.header-content h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.header-content p {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 宠物分类 */
.pet-categories {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.category-button {
  padding: 10px 20px;
  border: 2px solid var(--border-color);
  background-color: var(--white);
  color: var(--text-primary);
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.category-button:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.category-button.active {
  background-color: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}

/* 小型宠物网格 */
.small-pets-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.pet-card {
  background-color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.pet-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.pet-image-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.pet-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pet-card:hover .pet-image {
  transform: scale(1.05);
}

.pet-type-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--primary-color);
  color: var(--white);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.pet-info {
  padding: 25px;
}

.pet-info h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.pet-details {
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.detail-label {
  width: 60px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-value {
  color: var(--text-secondary);
}

.difficulty-level {
  display: flex;
  gap: 6px;
}

.difficulty-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e0e0e0;
  transition: var(--transition);
}

.difficulty-dot.active {
  background-color: var(--primary-color);
}

.pet-description {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 饲养指南 */
.care-guides {
  max-width: 1200px;
  margin: 60px auto 0;
  padding: 0 20px;
}

.care-guides h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: var(--text-primary);
}

.guides-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.guide-card {
  display: flex;
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 25px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.guide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}

.guide-icon {
  margin-right: 20px;
  color: var(--primary-color);
  flex-shrink: 0;
}

.guide-content h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.guide-content p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    padding: 30px 20px;
  }
  
  .header-content h1 {
    font-size: 2rem;
  }
  
  .header-content p {
    font-size: 1rem;
  }
  
  .small-pets-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .guides-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 20px 15px;
  }
  
  .header-content h1 {
    font-size: 1.8rem;
  }
  
  .pet-info {
    padding: 15px;
  }
  
  .pet-info h3 {
    font-size: 1.3rem;
  }
}

/* 查看详情按钮样式 */
.view-details {
  margin-top: 15px;
  text-align: right;
  font-weight: 600;
  color: var(--primary-color);
  font-size: 0.9rem;
  transition: var(--transition);
}

.view-details:hover {
  color: var(--primary-hover);
  transform: translateX(5px);
}
</style>